<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: qupen
  Date: 2016/9/18
  Time: 19:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../include/head.jsp">
    <jsp:param name="title" value="平台服务统计"/>
</jsp:include>

<jsp:include page="../include/admin_header.jsp"/>

<jsp:include page="../include/admin_sidebar.jsp"/>
<link rel="stylesheet" href="/css/dx.light.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="/css/dx.common.css">
<div class="content-wrapper">
    <section class="content-header" style="padding-bottom:0;padding-left:20px;">
        <h4 class="page-title" style="display: inline-block"><spring:message code="label.data.statistics"/></h4>
    </section>
    <section class="content" style="padding:20px">
        <div class="box box-primary">
            <div class="box-body">
                <div class="col-md-6">
                    <div class="sie-chart-title" style="margin: 10px">
                        <div class="sie-title-des"><spring:message code="label.service.device.statistics"/></div>
                    </div>
                    <div id="bar" style="height: 400px">

                    </div>
                </div>
                <div class="col-md-6">
                    <div class="sie-chart-title" style="margin: 10px">
                        <div class="sie-title-des"><spring:message code="label.device.statistics"/></div>
                    </div>
                    <div id="pie" style="height: 400px">

                    </div>
                </div>
            </div>
        </div>
    </section>

</div>
<jsp:include page="../include/foot.jsp"/>
<script src="/js/dx.all.js"></script>
<script>
    $(document).ready(function () {
        console.log(new Date());
        $.ajax({
            type: "get",
            url: "/admin/api/v1/service/statistics",
            success: function (data) {
                console.log(new Date());
                var s = data.data;
                showBar(s.deviceCountOfService);
                showPie(s.deviceCountOfTenant);
            },
            fail: function () {
                swal("Error!", "", "error");
            }
        })
    });

    function showBar(data) {
        $("#bar").dxChart({
            dataSource: data,
            series: {
                argumentField: "name",
                valueField: "value",
                name: "service count",
                type: "bar",
                color: '#ffaa66',
                min: 1
            },
            legend: {
                verticalAlignment: "bottom",
                horizontalAlignment: "center",
                itemTextPosition: "right"
            }
        });
    }

    function showPie(data) {
        $("#pie").dxPieChart({
            size: {
                width: 500
            },
            palette: "bright",
            dataSource: data,
            series: [
                {
                    argumentField: "tenant_name",
                    valueField: "count",
                    label: {
                        visible: true,
                        connector: {
                            visible: true,
                            width: 1
                        }
                    }
                }
            ],
            legend: {
                verticalAlignment: "bottom",
                horizontalAlignment: "center",
                itemTextPosition: "right"
            },
            title: "",
            "export": {
                enabled: false
            }
        });
    }
</script>
